<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 系统管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/systemMenus' }">系统菜单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
                <span>菜单名称：</span>
                <el-input v-model="query.menusname" placeholder="请输入内容" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="Search">筛选</el-button>
            </div>
            <el-button type="primary" @click="handleEdit()">新增菜单</el-button>
            <el-table :data="tableData" style="width: 100%" max-height="250">
                <el-table-column fixed prop="menusname" label="菜单名称" width="width" align="center">
                </el-table-column>
                <el-table-column prop="level" label="类别" width="width" align="center">
                </el-table-column>
                <el-table-column prop="icon" label="图标" width="width" align="center">
                </el-table-column>
                <el-table-column prop="assembly" label="组件" width="width" align="center">
                </el-table-column>
                <el-table-column prop="path" label="路径" width="width" align="center">
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="width" align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template slot-scope="scope">

                        <el-button type="warning" style="margin-right: 10px;" plain
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-dropdown split-button type="primary">
                            更多菜单
                            <el-dropdown-menu slot="dropdown">
                                <!-- 添加下级接口500错误 -->
                                <el-button>添加下级</el-button>
                                <el-button @click="handleDelete(scope.row)">删除</el-button>
                            </el-dropdown-menu>
                        </el-dropdown>


                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
                    :current-page="query.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :visible.sync="editVisible" width="80%">
            <MenuPopUp :formObj="formObj"></MenuPopUp>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false;">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//引入请求
import { selectAllMenus, updateMenu, deleteMenu, addMenus, selectAllMenusBymenusname } from '@/api/systemManager'
import MenuPopUp from '@/components/page/SystemManager/dialog/MenuPopUp'
export default {
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 2,
                menusname: '',
            },
            tableData: [],
            pageTotal: 0,
            editVisible: false,
            formObj: {},
            isEdit: false
        }
    },
    mounted() {
        this.getData()
    },
    components: {
        MenuPopUp,
    },
    methods: {
        //获取表格数据
        async getData() {
            let result = await selectAllMenus(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
            }
        },
        //删除
        handleDelete(rows) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(async () => {
                let params = {
                    id: rows.id
                }
                let result = await deleteMenu(params)
                if (result.code == 1) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.getData()
                } else {
                    this.$message({ message: result.msg, type: 'error' })
                }
            })
                .catch(() => { });
        },
        //编辑
        handleEdit(index, row) {
            this.formObj = {}
            if (row) {
                this.formObj = row
                this.isEdit = true
            }
            this.editVisible = true
        },
        //保存编辑或添加
        async saveEdit() {
            let result
            if (this.isEdit) {
                //编辑
                result = await updateMenu(this.formObj)
            } else {
                //添加
                let params = {
                    assembly: this.formObj.assembly,
                    menusname: this.formObj.menusname,
                    icon: this.formObj.icon,
                    path: this.formObj.path,
                    sort: this.formObj.sort
                }
                result = await addMenus(this.$qs.stringify(params))
            }
            if (result.code == 1) {
                this.$message({ message: result.msg, type: 'success' })
                this.editVisible = false
                this.getData()
            } else {
                this.$message({ message: result.msg, type: 'error' })
            }
            this.isEdit = false
        },
        //页码改变时
        handlePageChange(val) {
            this.query.pageNum = val
            console.log(this.query);
            this.getData();
        },
        //一页大小改变时
        handleSizeChange(val) {
            this.query.pageSize = val
            this.getData();
        },
        //搜索
        async Search() {
            this.query.pageNum = 1
            let result = await selectAllMenusBymenusname(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
                this.$message({ message: result.msg, type: 'success' })
            } else {
                this.$message({ message: result.msg, type: 'error' })
            }
        }
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 150px;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inlineBox {
    display: inline-block;
}
</style>
